<template>
    <textarea 
        class="custom-textarea"
        :value="modelValue" 
        @input="onInput"
        :maxlength="maxlength"
        :placeholder="placeholder"
        :auto-height="autoHeight"
        :show-confirm-bar="showConfirmBar"
        :adjust-position="adjustPosition"
        :confirm-type="confirmType"
        :cursor-spacing="cursorSpacing"
        :height="height"
        :disabled="disabled"
        :focus="focus"
        :placeholder-style="placeholderStyle"
        :placeholder-class="placeholderClass"
        :selection-start="selectionStart"
        :selection-end="selectionEnd"
        :fixed="fixed"
        @focus="onFocus"
        @blur="onBlur"
        @confirm="onConfirm"
        @linechange="onLinechange"
        @keyboardheightchange="onKeyboardheightchange">
    </textarea>
</template>

<script setup lang="ts">
interface Props {
    modelValue?: string
    placeholder?: string
    maxlength?: number
    height?: string | number
    autoHeight?: boolean
    showConfirmBar?: boolean
    adjustPosition?: boolean
    confirmType?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return'
    cursorSpacing?: number
    disabled?: boolean
    focus?: boolean
    placeholderStyle?: string
    placeholderClass?: string
    selectionStart?: number
    selectionEnd?: number
    fixed?: boolean
}

interface Emits {
    (e: 'update:modelValue', value: string): void
    (e: 'input', event: any): void
    (e: 'focus', event: any): void
    (e: 'blur', event: any): void
    (e: 'confirm', event: any): void
    (e: 'linechange', event: any): void
    (e: 'keyboardheightchange', event: any): void
}

const props = withDefaults(defineProps<Props>(), {
    placeholder: '',
    maxlength: 140,
    height: '200',
    autoHeight: true,
    showConfirmBar: false,
    adjustPosition: true,
    confirmType: 'return',
    cursorSpacing: 10,
    disabled: false,
    focus: false,
    placeholderStyle: '',
    placeholderClass: '',
    selectionStart: -1,
    selectionEnd: -1,
    fixed: false
})

const emit = defineEmits<Emits>()

function onInput(event: any) {
    emit('update:modelValue', event.detail.value)
    emit('input', event)
}

function onFocus(event: any) {
    emit('focus', event)
}

function onBlur(event: any) {
    emit('blur', event)
}

function onConfirm(event: any) {
    emit('confirm', event)
}

function onLinechange(event: any) {
    emit('linechange', event)
}

function onKeyboardheightchange(event: any) {
    emit('keyboardheightchange', event)
}
</script>

<style scoped lang="scss">
.custom-textarea {
    width: 100%;
    min-height: 200rpx;
    padding: 20rpx;
    border: 1px solid #E6E6E6;
    border-radius: 8rpx;
    font-size: 28rpx;
    line-height: 1.5;
    box-sizing: border-box;
    background-color: #fff;
    
    &:focus {
        border-color: #007aff;
        outline: none;
    }
    
    &:disabled {
        background-color: #f5f5f5;
        color: #999;
    }
}
</style>
